<template>
  <div class="filter-section">
    <div class="filter-form">
      <div class="filter-item">
        <label for="companySize">公司规模</label>
        <select
          id="companySize"
          v-model="filters.companySize"
          @change="applyFilters"
        >
          <option value="">不限</option>
          <option value="small">小型公司 (&lt;50人)</option>
          <option value="medium">中型公司 (50-500人)</option>
          <option value="large">大型公司 (&gt;500人)</option>
        </select>
      </div>
      <div class="filter-item">
        <label for="industry">行业</label>
        <select id="industry" v-model="filters.industry" @change="applyFilters">
          <option value="">不限</option>
          <option value="tech">科技</option>
          <option value="finance">金融</option>
          <option value="education">教育</option>
          <option value="healthcare">医疗</option>
        </select>
      </div>
      <div class="filter-item">
        <label for="experience">经验要求</label>
        <select
          id="experience"
          v-model="filters.experience"
          @change="applyFilters"
        >
          <option value="">不限</option>
          <option value="entry">应届生</option>
          <option value="junior">1-3年</option>
          <option value="mid">3-5年</option>
          <option value="senior">5年以上</option>
        </select>
      </div>
      <div class="filter-item">
        <label for="education">学历要求</label>
        <select
          id="education"
          v-model="filters.education"
          @change="applyFilters"
        >
          <option value="">不限</option>
          <option value="highschool">高中</option>
          <option value="bachelor">本科</option>
          <option value="master">硕士</option>
          <option value="phd">博士</option>
        </select>
      </div>
      <div class="filter-item">
        <label for="salary">薪资范围</label>
        <select id="salary" v-model="filters.salary" @change="applyFilters">
          <option value="">不限</option>
          <option value="0-5k">5k以下</option>
          <option value="5k-10k">5k-10k</option>
          <option value="10k-20k">10k-20k</option>
          <option value="20k-50k">20k-50k</option>
          <option value="50k+">50k以上</option>
        </select>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const filters = ref({
  companySize: '',
  industry: '',
  experience: '',
  education: '',
  salary: ''
})
</script>
<style scoped>
.filter-section {
  background-color: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-item {
  flex: 1;
  min-width: 100px;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #4a5568;
}

select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background-color: white;
  font-size: 1rem;
}
</style>
